<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html>
<head>

    <title>Main</title>
</head>

<body>
<div align="center">
    <h4>在线通讯录</h4>
    <p style="margin-bottom: 25px;">
        查找联系人:<input type="text" id="cname" style="width: 164px; " /><input
            type="button" id="btn" value="查找" /><a href="add.jsp">添加联系人</a>
    </p>
    <table width="600px;" border="1px;" id="tables"
           style="text-align: center;">
        <tr>
            <td>序号</td>
            <td>姓名</td>
            <td>手机</td>
            <td>QQ</td>
            <td>Email</td>
            <td>地址</td>
        </tr>

    </table>

    <div id="msg"></div>
</div>
</body>
</html>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
    $(function() {

        $.ajax({
            url : "${pageContext.request.contextPath}/ajaxsearch",
            dataType : "json",
            method : "post",
            success : function(data) {
                for (var i = 0; i < data.length; i++) {
                    $("#tables")
                        .append(
                            "<tr class='phones'><td>"
                            + data[i].id
                            + "</td><td><a href='${pageContext.request.contextPath}/toupdate?&id="
                            + data[i].id + "'>"
                            + data[i].cname
                            + "</a></td><td>"
                            + data[i].moblie
                            + "</td><td>" + data[i].qq
                            + "</td><td>"
                            + data[i].email
                            + "</td><td>"
                            + data[i].address
                            + "</td></tr>");
                }
                $("tr:even").css("background-color", "#95EC87");
                $("tr:eq(0)").css("background-color", "#ADD8E6");
            },
            error : function() {
                alert("失败!");
            }
        });

        $("#btn")
            .click(
                function() {

                    var cname = $("#cname").val();
                    if (cname == null || cname == "") {
                        alert("请填写搜索关键字！");
                        return false;
                    }
                    $(".phones").remove();
                    $
                        .ajax({
                            url : "${pageContext.request.contextPath}/ajaxsearch",
                            dataType : "json",
                            data : {
                                cname : cname
                            },
                            method : "post",
                            success : function(data) {
                                if (data.length == 0) {
                                    $("#tables").hide();
                                    $(".h").remove();
                                    $("#msg").append(
                                        "<h4 class='h'>"
                                        + "没有找到与“"
                                        + cname
                                        + "”相关记录"
                                        + "</h4>");
                                    return false;
                                }
                                $("#tables").show();
                                $(".h").remove();
                                for (var i = 0; i < data.length; i++) {
                                    $("#tables")
                                        .append(
                                            "<tr class='phones'><td>"
                                            + data[i].id
                                            + "</td><td><a href='${pageContext.request.contextPath}/toupdate?&id="
                                            + data[i].id
                                            + "'>"
                                            + data[i].cname
                                            + "</a></td><td>"
                                            + data[i].moblie
                                            + "</td><td>"
                                            + data[i].qq
                                            + "</td><td>"
                                            + data[i].email
                                            + "</td><td>"
                                            + data[i].address
                                            + "</td></tr>");
                                }
                                $("tr:even").css(
                                    "background-color",
                                    "#95EC87");
                                $("tr:eq(0)").css(
                                    "background-color",
                                    "#ADD8E6");
                            },
                            error : function() {
                                alert("失败!");
                            }
                        });

                });

    });
</script>
